<template>
  <div class="container">
    <div class="app-container">
  <!-- 
        :props = xxx
        :default-expand-all 是否默认展开
        el-tree 组件的数据有严格要求: 对象数据必须有两个字段 label(名字) children(孩子)
        el-tree 允许修改对象中的两个字段
          default-expand-all  是否默认展开所有节点
          expand-on-click-node  是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
  -->
     <el-tree :props="defaultProps" :data="depts" default-expand-all :expand-on-click-node="false">
      <!-- tree组件内部一定有一个 <slot node ='hh' data='hh'> -->
        <!-- 插槽(传递结构给组件内部使用) -->
         <!-- 默认插槽 直接决定每一行的结构 -->
      <template #default="{data}">
        <!-- data tree组件处理好的每一个节点的数据 -->
      <el-row style="width: 100%;">
        <el-col :span="20">{{ data.name }}</el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="12">{{ data.managerName || '暂无' }}</el-col>
            <el-col :span="12">
              <!-- $event => 指代事件处理函数本身的参数 -->
               <!-- data.id 就是这一行部门的id 也是新增出来的子部门的pid -->
                <!-- 需要一个 elementui 下拉菜单组件 -->
              <el-dropdown @command="handleCommand($event, data.id)">
                <span>操作</span>
                <el-dropdown-menu slot="dropdown" >
                  <el-dropdown-item @click.native="showDilog=true" command="add">新增子节点</el-dropdown-item>
                  <el-dropdown-item command="edit">修改</el-dropdown-item>
                  <el-dropdown-item command="del">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </template>
     </el-tree>
    </div>
     <el-dialog :visible.sync="showDilog" :title="title" @close="handleClose">
      <el-form label-width="100px" :model="addForm" :rules="rules" ref="form" size="mini">
          <el-form-item label="部门名称" prop="name">
            <el-input placeholder="请输入" v-model="addForm.name"/>
          </el-form-item>
          <el-form-item label="部门编码" prop="code">
            <el-input placeholder="请输入" v-model="addForm.code"/>
          </el-form-item>
          <el-form-item label="部门负责人" prop="managerId">
            <el-select placeholder="请输入" v-model="addForm.managerId">
              <el-option v-for="item in managerList" :key="item.id" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门介绍" prop="introduce">
            <el-input placeholder="请输入" v-model="addForm.introduce" type="textarea"/>
          </el-form-item>
        </el-form>
        <div style="display: flex;justify-content: center;">
          <el-button type="primary" @click="addFrom">确定</el-button>
          <el-button @click="onCancel">取消</el-button>
        </div>
    </el-dialog>
    <!-- <add-department :showDilog="showDilog" @xx="showDilog=$event" ></add-department> -->
  </div>
</template>
<script>
import {getDepartments, getManagerList,addDepartments,getDepartDetail,editDepartment,deleteDepartment} from '@/api/department'
import {transList2TreeData} from '@/utils'
//  import AddDepartment from './component/adddepartment.vue'
export default {
  name: 'Department',
  components:{
    //  AddDepartment
  },
data(){
  return{
    // 部门数据 是个对象
    // label 标识部门名(必选)
    // children 标识部门的子部门(可选) 是个数组
    depts:[],
    parentid:0, // 父部门id 添加部门的时候要获取到父部门id 才能知道子部门是加在谁身上的
    managerList:[],  // 部门负责人
    list:[],
    defaultProps:{
      children:'children',
      label:'name'
    },
    showDilog:false,
    addForm:{
    name:'',
    code:'',
    managerId:'',
    introduce:'',
    // parentid:0,
  
  } ,  // 添加部门表单数据 字段和后端对齐
  // 规则
  rules:{
    name:[
      {required:true,message:'部门名称不能为空',trigger:'blur'},
      {min:1,max:10,message:'长度在1-10个字符',trigger:'blur'},
      // 自定义校验
      {validator:(rule,value,callback)=>{
        // 新增时, 和所有人比 this.list
        // 编辑时 和除了自己意外的人比 this.list.filter(自己除去)
        // this.addForm.id 有就是编辑 没有就是新增
        // const temp = this.list
        if(this.addForm.id){
          this.list=  this.list.filter(item=> item.id !== this.addForm.id)  // 排除自己 留下其他人
        }
        if(this.list.some(item => item.name === value)){
          callback(new Error('和已有部门名称重复'))
        }else{
          callback()
        }
      }, trigger:'blur'}
    ],
    code:[
      {required:true,message:'部门编码不能为空',trigger:'blur'},
      {min:1,max:10,message:'长度在1-10个字符',trigger:'blur'},
      {validator:(rule,value,callback)=>{
        if(this.addForm.id){
          this.list = this.list.filter(item=> item.id !== this.addForm.id)
        }
        if(this.list.some(item => item.code === value)){
          callback(new Error('和已有部门编码重复'))
        }else{
          callback()
        }
      }, trigger:'blur'}
    ],
    managerId:[
      {required:true,message:'部门编码不能为空',trigger:'blur'},
      // {min:1,max:10,message:'长度在1-10个字符',trigger:'blur'}
    ],
    introduce:[
      {required:true,message:'部门编码不能为空',trigger:'blur'},
      {min:1,max:100,message:'长度在1-10个字符',trigger:'blur'}
    ]
  },
  
  }
  
 

},
computed:{
  title(){
return this.addForm.id?'编辑部门':'添加部门'
  }
},
created(){
  this.getDepartments()
  this.getManagerList()
},
methods:{
  handleClose(){
    this.$refs.form.resetFields()
    // 清除和页面没有绑定的字段
    this.addForm={
      name:'',
      code:'',
      managerId:'',
      introduce:'',
      // parentid:0,
    }
  },
  onCancel(){
    this.$refs.form.resetFields()
    this.$message.success('取消成功')
    this.showDilog = false
  },
  // 整体校验 => 封装aoi接口 请求后端 => 提示 => 关闭对话框 => 清空 => 重新请求渲染(调用函数)
  addFrom(){
    this.$refs.form.validate(async valid => {
      if(!valid) return
      if(this.addForm.id){
        // 编辑
        // 编辑请求
        await editDepartment(this.addForm)
        this.$message.success('编辑成功')
      }else{
        // 创建一个新对象
       await addDepartments({
       // this.addForm是一个部门对象
        ...this.addForm,
        
        pid: this.parentid // 手动添加 新部门的父部门id
        
      })
      this.$message.success('添加成功')
      }
     
      // this.$message.success('添加成功')
      this.showDilog = false
      this.getDepartments()
      // this.$refs.form.resetFields()
      this.handleClose()
    })
  },
  /**
   * 获取部门负责人
   * * */
 getManagerList(){
    getManagerList().then(res => {
      this.managerList = res
    })
  },
  /**
   * 获取部门列表
   * **/ 
  async getDepartments(){
    // 获取部门列表数据
    const res = await getDepartments()
    this.list=res
    // console.log(res)
    // this.getChildrenDepart( res, 1)
   
    this.depts =transList2TreeData( res, 0)

// console.log(this.getChildrenDepart(res, 1))
  },
  handleCommand(type,id){
    if(type === 'add'){
         this.showDilog = true
           this.parentid = id // 存一下这行部门的id => 这是即将添加的子部门的pid
    }
    if(type === 'edit'){
      this.showDilog = true   // 打开对话框
        this.parentid = id   // 存 id => 编辑部门时获取部门详情id
// 请求部门详情
            this.getDepartDetail()
 
    }
    if(type === 'del'){
      this.parentid = id
      // 二次确认, 防误触
      this.$confirm('此操作将永久删除该部门, 是否继续?', '警告',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',  // 配置取消按钮文字
        type: 'warning'  // 配置图标
      }).then(()=>{
        // 有 this 的地方 都要加 箭头函数
        this.deleteDepartment()
      }).catch(()=>{

      })
      
    }
    
  },
  /**
   * 删除部门
   * **/ 
  async deleteDepartment(){
   await deleteDepartment(this.parentid)
   this.getDepartments()
   this.$message.success('删除成功')
  },
/**
 * 获取部门列表详情
 * */ 
 async getDepartDetail(){
    const res = await getDepartDetail(this.parentid)
    // 回显 将后端返回的详情数据 赋值给表单 表单和页面做了双绑
    this.addForm = res
}
 
//   /**
//    * 获取指定部门的子部门
//    * @param list 部门列表数据
//    * @param departid 指定部门的id
//    * **/ 
//   getChildrenDepart(list, departid){
// //  return list.filter(item => item.pid === departid)
// const arr =[]
// list.forEach(item => {
//   if(item.pid === departid){
//     // !!!! 每找到一个子部门 带着这个子部门 item.id  继续找他的子部门(调用自己这个函数即可)
//     item.children = this.getChildrenDepart(list, item.id)  // 加入arr 之前 找一下item子部门
//     arr.push(item)  // 将总彩板加入arr 中 表示总裁办是传智教育的子部门
//   }
// })
// return arr
//   }
}
}
</script>
